<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div class="rights">
      <!--面包屑导航-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>

      <!--表格-->
      <el-table :data="rightList">

        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="权限名称" prop="authName"></el-table-column>
        <el-table-column label="路径" prop="path"></el-table-column>
        <el-table-column label="层级" prop="level">
          <template v-slot:default="{ row }">
            <p v-if="row.level ==='0'">一级</p>
            <p v-if="row.level ==='1'">二级</p>
            <p v-if="row.level ==='2'">三级</p>
          </template>
        </el-table-column>

      </el-table>

    </div>
</template>

<script>
export default {
  data () {
    return {
      rightList: []
    }
  },
  async created () {
    const { meta, data } = await this.$axios.get(`rights/list`)
    if (meta.status === 200) {
      this.rightList = data
    } else {
      this.$message.error(meta.msg)
    }
  }
}
</script>

<style scoped lang="less">

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>
